<template>
  <bs-dialog
    :title="$t('状态汇总')"
    :visible.sync="showTable"
    size="medium"
    @closed="doCloseTable"
    class="summaryTable"
  >
    <template slot="main">
      <bs-main>
        <div class="opration container">
          <div class="oprationLeft">
            <span>{{ $t('时间：') }}</span>
            <span class="summary-title">{{ currentDate }}</span>
          </div>
          <div class="oprationRight">
            <download-excel
              type="primary"
              class="export-excel-wrapper"
              :fetch="handleExport"
              :fields="excelDataFields"
              :worksheet="worksheet"
              :name="excelFileName"
            >
              <el-button type="primary" size="small">{{
                $t('导出表格')
              }}</el-button>
            </download-excel>
          </div>
        </div>
        <list
          ref="list"
          class="center"
          height="480px"
          :list-data="tableData"
          :table-tag="tableName"
          :has-select="false"
          :list-cols="colData"
          :init-cols-props.sync="initColsProps"
          :init-headmune-flag="initHeadmuneFlag"
          :action-opts="actionOpts"
          @init-table="initTable"
          @sort="handleSort"
        >
          <template slot="sortNumSlot" slot-scope="{ $index }">
            {{ $index + 1 }}
          </template>
          <template slot="screenaSlot" slot-scope="{ row }">
            {{ row | screenFilter('b') }}
          </template>
          <template slot="screenbSlot" slot-scope="{ row }">
            {{ row | screenFilter('c') }}
          </template>
          <template slot="screencSlot" slot-scope="{ row }">
            {{ row | screenFilter('d') }}
          </template>
          <template slot="screendSlot" slot-scope="{ row }">
            {{ row | screenFilter('e') }}
          </template>
          <template slot="screeneSlot" slot-scope="{ row }">
            {{ row | screenFilter('f') }}
          </template>
        </list>
      </bs-main>
    </template>
    <template slot="footer"> </template>
  </bs-dialog>
</template>
<script>
import List from '@/components/List'
import Pagination from '@/components/Pagination'
import ScreenApi from '@/api/screen'
import DownloadExcel from 'vue-json-excel'
export default {
  name: 'SummaryIndexDialog',
  components: {
    List,
    DownloadExcel,
    // Pagination,
  },
  data() {
    return {
      showTable: false,
      tableData: [],
      tableName: 'summaryTable',
      colData: [
        { label: '序号', prop: 'sortNum', minwidth: '50', slot: true },
        { label: '1号屏', prop: 'screena', minwidth: '120', slot: true },
        { label: '2号屏', prop: 'screenb', minwidth: '120', slot: true },
        { label: '3号屏', prop: 'screenc', minwidth: '120', slot: true },
        { label: '4号屏', prop: 'screend', minwidth: '120', slot: true },
        { label: '5号屏', prop: 'screene', minwidth: '120', slot: true },
        { label: '统计', prop: 'stateCount', minwidth: '50' },
      ],
      currentDate: '0000-00-00',
      initColsProps: [
        'sortNum',
        'screena',
        'screenb',
        'screenc',
        'screend',
        'screene',
        'stateCount',
      ],
      initHeadmuneFlag: false,
      actionOpts: {
        show: false,
      },
      pageData: {
        page: 1,
        total: 0,
        limit: 15,
      },
      sortNum:1,
      worksheet: this.$t('物理屏监控统计汇总数据'),
      excelFileName: this.$t('物理屏监控统计汇总数据.xls'),
      excelDataFields: {
        '序号':  {
          field: "screena",
                    //自定义回调函数
          callback: value => this.formatSort()
        },
        '1号屏':  {
          field: "screena",
                    //自定义回调函数
          callback: value => this.formatSrceen(value)
        },
        '2号屏': {
          field: "screenb",
          callback: value => this.formatSrceen(value)
        },
        '3号屏': {
          field: "screenc",
          callback: value => this.formatSrceen(value)
        },
        '4号屏': {
          field: "screend",
          callback: value => this.formatSrceen(value)
        },
        '5号屏': {
          field: "screene",
          callback: value => this.formatSrceen(value)
        },
        统计: 'stateCount',
      },
    }
  },
  props: {
    queryData: {
      default: {},
    },
  },
  created() {
    this.$eventBus.$on('showPhysicalScreenStateSummary', this.show)
  },
  beforeDestroy() {
    this.$eventBus.$off('showPhysicalScreenStateSummary')
  },
  filters: {
    screenFilter(val, addr) {
      if (val) {
        let msg = ''
        switch (addr) {
          case 'b':
            if(val.screena.message == '没有屏幕状态提交'){
              msg = 'x/' + val.screena.message
            }else{
              msg = val.screena.code + '/' + val.screena.message
            }
            break
          case 'c':
             if(val.screenb.message == '没有屏幕状态提交'){
              msg = 'x/' + val.screenb.message
            }else{
              msg = val.screenb.code + '/' + val.screenb.message
            }
            
            break
          case 'd':
               if(val.screenc.message == '没有屏幕状态提交'){
              msg = 'x/' + val.screenc.message
            }else{
              msg = val.screenc.code + '/' + val.screenc.message
            }
            break
          case 'e':
              if(val.screend.message == '没有屏幕状态提交'){
              msg = 'x/' + val.screend.message
            }else{
              msg = val.screend.code + '/' + val.screend.message
            }
            break
          case 'f':
             if(val.screene.message == '没有屏幕状态提交'){
              msg = 'x/' + val.screene.message
            }else{
              msg = val.screene.code + '/' + val.screene.message
            }
            break
          default:
            return
        }
        return msg
      }
      return ''
    },
  },
  methods: {
    formatSort(){
      return this.sortNum++
    },
    formatSrceen(val){
       if(val.message == '没有屏幕状态提交'){
          return 'x/' + val.message
        }else{
          return val.code + '/' + val.message;
        }
    },
    initTable(config) {
      this.initHeadmuneFlag = false
    },
    handleSort(sortInfo) {},
    show() {
      let date = new Date()
      this.currentDate = date.toLocaleDateString()
      this.showTable = true
      this.doList()
    },
    doCloseTable() {
      this.showTable = false
    },
    async doList() {
      var params = {}
      if (this.queryData.groupId) {
        params = {
          groupId: this.queryData.groupId,
        }
      } else {
        params = {
          groupId: -2,
        }
      }

      const res = await ScreenApi.physicalScreenStateSummary(params)
       console.log('index dialog',typeof(res) == Array)
      if (Array.isArray(res)) {
        this.tableData = res
      } else {
        this.tableData = []
      }
    },
    handleExport() {
      this.sortNum = 1
      if (this.tableData && this.tableData.length > 0) {
        return this.tableData
      } else {
        this.$alert('提示', '终端数据为空')
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.container {
  margin-top: 20px;
  margin-bottom: 10px;
}
::v-deep .el-dialog {
  width: 800px;
  height: 620px;
  }
</style>